<template>
  <div class="layerMap_cloudRadar">
    <div>
      <h3>
        <div class="exampleMap">
          <Map ref="map" />
        </div>
      </h3>
      <h3>
        <Button type="primary" @click="addLayer('cloudLayer')">添加云图</Button>
        <Button type="primary" @click="removeLayer('cloudLayer')">删除云图</Button>
        <Button type="primary" @click="refreshAnimate('cloudLayer')">重播云图动画</Button>
        <Button v-if="layers['cloudLayer']">云图时间：{{layers['cloudLayer'].dateTime}}</Button>
      </h3>
      <h3>
        <Button type="primary" @click="addLayer('radarLayer')">添加雷达图</Button>
        <Button type="primary" @click="removeLayer('radarLayer')">删除雷达图</Button>
        <Button type="primary" @click="refreshAnimate('radarLayer')">重播雷达图动画</Button>
        <Button v-if="layers['radarLayer']">雷达图时间：{{layers['radarLayer'].dateTime}}</Button>
      </h3>

      <code class="code">
        <!-- template -->
        <div>
          <div class="code-tag">
            <<span>template</span>>
          </div>
          <div class="code-indent2 code-tag">
            <<span>div></span>
          </div>
          <div class="code-indent4">
            <span class="code-tag">
              <<span>div</span>
              <span class="code-orange">v-if</span>=<span class="code-green">"layers['cloudLayer']"</span>></span>云图时间：{<span>{ layers['cloudLayer'].dateTime }</span>}<span class="code-tag"><<span>/div></span></span>
          </div>
          <div class="code-indent4">
            <span class="code-tag">
              <<span>div</span>
              <span class="code-orange">v-if</span>=<span class="code-green">"layers['radarLayer']"</span>></span>雷达图时间：{<span>{ layers['radarLayer'].dateTime }</span>}<span class="code-tag"><<span>/div></span></span>
          </div>
          <div class="code-indent2 code-tag">
            </<span>div</span>>
          </div>
          <div class="code-tag">
            </<span>template</span>>
          </div>
        </div>

        <div class="code-emptyLine"></div>

        <!-- script -->
        <div>
          <div class="code-tag">
            <<span>script</span>>
          </div>

          <!-- import 和 export default -->
          <div>
            <div class="code-indent2">
              <span class="code-orange">import</span>
              { Maps, Utils }
              <span class="code-orange">from</span>
              <span class="code-green">'src/base/Gykj_map'</span>
            </div>
            <div class="code-emptyLine"></div>
            <div class="code-indent2">
              <span class="code-orange">export default</span>
              {
            </div>
          </div>

          <!-- data -->
          <div>
            <div class="code-indent4">
              data () {
            </div>
            <div class="code-indent6">
              <span class="code-purpleRed">return</span> {
            </div>
            <div class="code-indent8">
              layers: {}
            </div>
            <div class="code-indent6">}</div>

            <div class="code-indent4">},</div>
          </div>

          <!-- methods -->
          <div>
            <div class="code-indent4">
              methods: {
            </div>

            <div class="code-indent6 comment">
              // 添加云图
            </div>
            <div class="code-indent6">
              <span class="code-purpleRed">async</span>
              addCloudLayer () {
            </div>
            <div class="code-indent8">
              <span class="code-default">const</span>
              res =
              <span class="code-purpleRed">await</span>
              <span class="code-green">Maps</span>['cloudLayer']({
            </div>
            <div class="code-indent10">layerOptions: {</div>
            <div class="code-indent12">
              Map: this.Map,
              <span class="comment">// 必传，你的地图实例</span>
            </div>
            <div class="code-indent12">
              Layers: this.layers,
              <span class="comment">// 必传，你的存放所有地图图层的变量</span>
            </div>
            <div class="code-indent12">
              Dom: this.$refs['wrapper'],
              <span class="comment">// 必传，存放云图时间的Dom，需要你传入真正的dom</span>
            </div>
            <div class="code-indent12">
              isCustom: true,
              <span class="comment">// 选传，设置为自定义数据图层，为true时，必须传入apiUrl或者data</span>
            </div>
            <div class="code-indent12">
              apiUrl: '',
              <span class="comment">// 选传，可传入api源路径，需注意，传入api源是不能配置请求参数的</span>
            </div>
            <div class="code-indent12">
              data: [],
              <span class="comment">// 选传，可直接传入数据，传入的数据字段必须和默认api源数据字段吻合</span>
            </div>
            <div class="code-indent12">
              cloudRadarClass: 'cloudClass'
              <span class="comment">
                // 选传，可通过添加cloudRadarClass，可改变显示时间的样式
              </span>
            </div>
            <div class="code-indent10">}</div>

            <div class="code-indent8">})</div>

            <div class="code-emptyLine"></div>

            <div class="code-indent8">
              if (res.code === <span class="code-green">Utils</span>.ERR_OK) {
            </div>
            <div class="code-indent10">
              <span class="code-orange">this</span>.$set(<span class="code-orange">this</span>.layers, 'cloudLayer', res)
            </div>

            <!-- <div class="code-emptyLine"></div>
            <div class="code-indent10 comment">
              // 缩小地图的动画
            </div>
            <div class="code-indent10">
              <span class="code-green">Utils</span>.createAnimate({
            </div>
            <div class="code-indent12 comment">
              // this.Map 为你创建的 地图实例，我这里就不详细写了
            </div>
            <div class="code-indent12">
              Map: <span class="code-orange">this</span>.Map,
            </div>
            <div class="code-indent12">
              ...res.animateData
            </div>
            <div class="code-indent10">}, () => {</div>
            <div class="code-indent12">
              <span class="code-orange">this</span>.Map.addLayer(<span class="code-orange">this</span>.layers['cloudLayer'].layer)
            </div>
            <div class="code-indent12 comment">
              // 开启切换图片的定时器
            </div>
            <div class="code-indent12"><span class="code-orange">this</span>.layers['cloudLayer'].interval(<span class="code-orange">this</span>.layers['cloudLayer'])</div>
            <div class="code-indent10">
              })
            </div> -->

            <div class="code-indent8">} else {</div>

            <div class="code-indent10 comment">
              // 获取该图层失败，自己做错误提醒
            </div>
            <div class="code-indent10 comment">
              // 错误原因，大部分为接口出错
            </div>

            <div class="code-indent8">}</div>

            <div class="code-indent6">
              },
            </div>

            <div class="code-indent6 comment">
              // 删除云图
            </div>
            <div class="code-indent6">
              removeCloudLayer () {
            </div>
            <div class="code-indent8 comment">
              // 先清掉图层切换图片的定时器
            </div>
            <div class="code-indent8">
              <span class="code-purpleRed">clearInterval</span>(<span class="code-orange">this</span>.layers['cloudLayer'].timeInterval)
            </div>
            <div class="code-indent8">
              <span class="code-orange">this</span>.Map.removeLayer(<span class="code-orange">this</span>.layers['cloudLayer'].layer)
            </div>
            <div class="code-indent8">
              <span class="code-orange">this</span>.$delete(<span class="code-orange">this</span>.layers, 'cloudLayer')
            </div>

            <div class="code-indent6">},</div>

            <div class="code-indent6 comment">
              // 重播云图动画
            </div>
            <div class="code-indent6">
              refreshCloudAnimate () {
            </div>
            <div class="code-indent8">
              <span class="code-orange">this</span>.layers['cloudLayer'].interval(<span class="code-orange">this</span>.layers['cloudLayer'])
            </div>
            <div class="code-indent6">},</div>

            <div class="code-indent6 comment">
              // 添加雷达图
            </div>
            <div class="code-indent6">
              <span class="code-purpleRed">async</span>
              addRadarLayer () {
            </div>
            <div class="code-indent8">
              <span class="code-default">const</span>
              res =
              <span class="code-purpleRed">await</span>
              <span class="code-green">Maps</span>['radarLayer']({
            </div>
            <div class="code-indent10">layerOptions: {</div>
            <div class="code-indent12">
              Map: this.Map,
              <span class="comment">// 必传，你的地图实例</span>
            </div>
            <div class="code-indent12">
              Layers: this.layers,
              <span class="comment">// 必传，你的存放所有地图图层的变量</span>
            </div>
            <div class="code-indent12">
              Dom: this.$refs['wrapper'],
              <span class="comment">// 必传，存放雷达图时间的Dom，需要你传入真正的dom</span>
            </div>
            <div class="code-indent12">
              isCustom: true,
              <span class="comment">// 选传，设置为自定义数据图层，为true时，必须传入apiUrl或者data</span>
            </div>
            <div class="code-indent12">
              apiUrl: '',
              <span class="comment">// 选传，可传入api源路径，需注意，传入api源是不能配置请求参数的</span>
            </div>
            <div class="code-indent12">
              data: [],
              <span class="comment">// 选传，可直接传入数据，传入的数据字段必须和默认api源数据字段吻合</span>
            </div>
            <div class="code-indent12">
              cloudRadarClass: 'radarClass'
              <span class="comment">
                // 选传，可通过添加cloudRadarClass，可改变显示时间的样式
              </span>
            </div>
            <div class="code-indent10">}</div>

            <div class="code-indent8">})</div>

            <div class="code-emptyLine"></div>

            <div class="code-indent8">
              if (res.code === <span class="code-green">Utils</span>.ERR_OK) {
            </div>
            <div class="code-indent10">
              <span class="code-orange">this</span>.$set(<span class="code-orange">this</span>.layers, 'radarLayer', res)
            </div>
            <!-- <div class="code-emptyLine"></div>
            <div class="code-indent10 comment">
              // 缩小地图的动画
            </div>
            <div class="code-indent10">
              <span class="code-green">Utils</span>.createAnimate({
            </div>
            <div class="code-indent12 comment">
              // this.Map 为你创建的 地图实例，我这里就不详细写了
            </div>
            <div class="code-indent12">
              Map: <span class="code-orange">this</span>.Map,
            </div>
            <div class="code-indent12">
              ...res.animateData
            </div>
            <div class="code-indent10">}, () => {</div>
            <div class="code-indent12">
              <span class="code-orange">this</span>.Map.addLayer(<span class="code-orange">this</span>.layers['radarLayer'].layer)
            </div>
            <div class="code-indent12 comment">
              // 开启切换图片的定时器
            </div>
            <div class="code-indent12"><span class="code-orange">this</span>.layers['radarLayer'].interval(<span class="code-orange">this</span>.layers['radarLayer'])</div>
            <div class="code-indent10">
              })
            </div> -->

            <div class="code-indent8">} else {</div>

            <div class="code-indent10 comment">
              // 获取该图层失败，自己做错误提醒
            </div>
            <div class="code-indent10 comment">
              // 错误原因，大部分为接口出错
            </div>

            <div class="code-indent8">}</div>

            <div class="code-indent6">
              },
            </div>

            <div class="code-indent6 comment">
              // 删除雷达图
            </div>
            <div class="code-indent6">
              removeRadarLayer () {
            </div>
            <div class="code-indent8 comment">
              // 先清掉图层切换图片的定时器
            </div>
            <div class="code-indent8">
              <span class="code-purpleRed">clearInterval</span>(<span class="code-orange">this</span>.layers['radarLayer'].timeInterval)
            </div>
            <div class="code-indent8">
              <span class="code-orange">this</span>.Map.removeLayer(<span class="code-orange">this</span>.layers['radarLayer'].layer)
            </div>
            <div class="code-indent8">
              <span class="code-orange">this</span>.$delete(<span class="code-orange">this</span>.layers, 'radarLayer')
            </div>

            <div class="code-indent6">},</div>

            <div class="code-indent6 comment">
              // 重播雷达图动画
            </div>
            <div class="code-indent6">
              refreshRadarAnimate () {
            </div>
            <div class="code-indent8">
              <span class="code-orange">this</span>.layers['radarLayer'].interval(<span class="code-orange">this</span>.layers['radarLayer'])
            </div>
            <div class="code-indent6">}</div>

            <div class="code-indent4">}</div>
          </div>

          <!-- export default 的 } -->
          <div class="code-indent2">}</div>

          <!-- /script -->
          <div class="code-tag">
            </<span>script</span>>
          </div>
        </div>

      </code>
    </div>
  </div>
</template>

<script>
import { Components } from 'base/Gykj_map'

export default {
  components: {
    Map: Components.initMap
  },
  mounted () {
    setTimeout(() => {
      this.layers = this.$refs['map'].getLayers()
    }, 20)
  },
  data () {
    return {
      layers: {}
    }
  },
  methods: {
    addLayer (layerName) {
      this.$refs['map'].addLayer({ layerName })
    },
    removeLayer (layerName) {
      this.$refs['map'].removeLayer({ layerName })
    },
    refreshAnimate (layerName) {
      this.$refs['map'].refreshAnimate({ layerName })
    }
  }
}
</script>

<style lang="scss" scoped>
  .layerMap_cloudRadar {
    width: 100%;
    height: 100%;
    position: relative;
    overflow: auto;
  }
</style>
